<!DOCTYPE html>
<html>
	
	
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		    <div  id="app">
				<span v-for="item  in arr">{{item}}       </span>
				<br />
				
				<!-- 添加数据 -->
				<input type="text" v-model="num" />
				
				<button @click="push"   >追加</button>
				<button @click="pop"   >删除尾元素</button>
				
				<button @click="shift" >删除头元素</button>
				<button @click="unshift"   >添加头元素</button>
				
				<button @click="splice">替换</button>
				
				<button @click="sort">排序</button>
				
			</div>
		
		     
		    <script  src="../js/vue.js"></script>
			
			<script>
			const  app=new  Vue({
				el: "#app",
				data: {
					arr :  [1,-3,12,23,29,34],
					num : ''
				},
				methods:{
					push(){
						this.arr.push(this.num);
					},
					pop(){
						this.arr.pop(this.num);
					},
					shift(){
						this.arr.shift(this.num);
					},
					unshift(){
						this.arr.unshift(this.num);
					},
					splice(){
					
						this.arr.splice(0,1,7);
					},
					sort(){
						this.arr.sort();
					}
					
				}
				
			})
			
			
		   </script>	
			
			
		
	</body>
	
	
	
</html>
